<template>
  <div class="form-demo">
    <Form
      :rule="formRules"
      :initial-values="initialValues"
      @submit="handleSubmit"
      layout="vertical"
      title="表单实列"
    >
      <FormItem name="username" v-slot="{field}" label="用户名"  >
        <OInput  v-bind="field" type="text" placeholder="请输入用户名"/>
      </FormItem>
      <FormItem name="username" v-slot="{field}" label="用户名用"  >
        <OInput  v-bind="field" type="text" placeholder="请输入用户名"/>
      </FormItem>
      <OButton type="primary" native-type="submit">
        提交
      </OButton>
    </Form>
  </div>
</template>

<script setup>

import { OInput } from '@libc/orange-ui'
import { OButton } from '@libc/orange-ui'
import * as zod from 'zod'
import { toTypedSchema } from '@vee-validate/zod'
import { computed } from 'vue'
import FormItem from '../../../packages/orange-ui/components/form/src/formItem.vue'

// 表单验证规则
const formRules = {
  username: zod.string().nonempty({message: "不能为空"}).min(3, { message: '用户名至少3个字符' }),
}

// // 转换为vee-validate验证模式
// const validationSchema = computed(() => {
//   return toTypedSchema(zod.object(formRules))
// })

// 表单初始值
const initialValues = {
  username: '',

}

// 提交表单处理函数
const handleSubmit = (values) => {
  console.log('表单提交数据:', values)
  alert('提交成功: ' + JSON.stringify(values))
}
</script>

<style scoped>
.form-demo {
  padding: 20px;
  border: 1px solid #ccc;
  width: 500px;
  height: 500px;
}
</style>